<template>
  <section
    :style="{
      width: '100%',
      height: multiTab ? 'calc( 100vh - 130px)' : 'calc( 100vh - 100px)',
      'overflow-y': 'hidden'
    }"
  >
    <router-view v-if="isKeep" v-slot="{ Component }">
      <page-toggle-transition
        :disabled="animateDisable"
        :animate="animate"
        :direction="animateDirection"
      >
        <keep-alive>
          <component :is="Component" :key="$route.fullPath" />
        </keep-alive>
      </page-toggle-transition>
    </router-view>
    <router-view v-else />
  </section>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import PageToggleTransition from '@/components/transition/PageToggleTransition.vue'
import { animateDisable, animate, animateDirection, multiTab } from '@/store/useSiteSettings'
export default defineComponent({
  name: 'RouteView',
  components: { PageToggleTransition },
  props: {
    keepAlive: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const store = useStore()
    const router = useRouter()
    const isKeep = ref(false)

    watch(
      () => router.currentRoute.value,
      (newVal) => {
        // 这里增加了 multiTab 的判断，当开启了 multiTab 时
        // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
        // 若确实不需要，可改为 return meta.keepAlive ? isKeep : notKeep
        const routeKeepAlive = router.currentRoute.value.meta.keepAlive
        if (!store.state.app.multiTab && !routeKeepAlive && !props.keepAlive) {
          isKeep.value = false
        } else {
          isKeep.value = true
        }
      },
      {
        immediate: true
      }
    )

    return {
      multiTab,
      isKeep,
      animateDisable,
      animate,
      animateDirection
    }
  }
})
</script>
<style>
.router_animate-enter-active {
  animation: rollIn 1s;
}
.router_animate-leave-active {
  animation: rollOut 0.6s;
}
</style>
